// 导入React Router的useNavigate钩子，用于页面导航
import { useNavigate } from 'react-router-dom';
// 导入Lucide React图标库中的各种图标组件
import { 
  ArrowLeft, // 左箭头图标
  User, // 用户图标
  Settings, // 设置图标
  Heart, // 心形图标
  FileText, // 文档图标
  Shield, // 盾牌图标
  HelpCircle, // 帮助图标
  LogOut, // 退出图标
  ChevronRight, // 右箭头图标
  Bell, // 铃铛图标
  CreditCard, // 信用卡图标
  MapPin // 地图定位图标
} from 'lucide-react';

// 定义菜单项接口类型
interface MenuItem {
  id: string; // 菜单项唯一标识
  icon: React.ComponentType<{ size?: number; className?: string }>; // 菜单项图标组件
  title: string; // 菜单项标题
  subtitle?: string; // 菜单项副标题（可选）
  onClick: () => void; // 点击事件处理函数
}

/**
 * 个人中心页面组件 - 用户个人信息管理
 * 
 * 功能特性：
 * - 用户基本信息展示
 * - 功能菜单导航
 * - 个人资料管理
 * - 消息通知设置
 * - 支付管理
 * - 收货地址管理
 * - 收藏内容管理
 * - 就诊记录查看
 * - 隐私设置
 * - 帮助中心
 * - 应用设置
 * 
 * 主要组件：
 * - 用户头像和基本信息
 * - 功能菜单列表
 * - 退出登录按钮
 * 
 * 菜单项结构：
 * - id: 菜单项唯一标识
 * - icon: 菜单项图标组件
 * - title: 菜单项标题
 * - subtitle: 菜单项副标题
 * - onClick: 点击事件处理函数
 * 
 * 导航功能：
 * - 个人资料编辑
 * - 消息通知设置
 * - 支付方式管理
 * - 收货地址管理
 * - 收藏内容查看
 * - 就诊记录查看
 * - 隐私权限设置
 * - 帮助文档查看
 * - 应用设置
 * 
 * @returns {JSX.Element} 个人中心页面组件
 */
export default function ProfilePage() {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate();

  // 定义菜单项数组
  const menuItems: MenuItem[] = [
    {
      id: 'personal', // 个人资料菜单项ID
      icon: User, // 个人资料图标
      title: '个人资料', // 个人资料标题
      subtitle: '修改个人信息', // 个人资料副标题
      onClick: () => console.log('个人资料'), // 个人资料点击事件
    },
    {
      id: 'notifications', // 消息通知菜单项ID
      icon: Bell, // 消息通知图标
      title: '消息通知', // 消息通知标题
      subtitle: '设置消息提醒', // 消息通知副标题
      onClick: () => console.log('消息通知'), // 消息通知点击事件
    },
    {
      id: 'payment', // 支付管理菜单项ID
      icon: CreditCard, // 支付管理图标
      title: '支付管理', // 支付管理标题
      subtitle: '管理支付方式', // 支付管理副标题
      onClick: () => console.log('支付管理'), // 支付管理点击事件
    },
    {
      id: 'address', // 收货地址菜单项ID
      icon: MapPin, // 收货地址图标
      title: '收货地址', // 收货地址标题
      subtitle: '管理收货地址', // 收货地址副标题
      onClick: () => console.log('收货地址'), // 收货地址点击事件
    },
    {
      id: 'favorites', // 我的收藏菜单项ID
      icon: Heart, // 我的收藏图标
      title: '我的收藏', // 我的收藏标题
      subtitle: '收藏的医生和文章', // 我的收藏副标题
      onClick: () => console.log('我的收藏'), // 我的收藏点击事件
    },
    {
      id: 'records', // 就诊记录菜单项ID
      icon: FileText, // 就诊记录图标
      title: '就诊记录', // 就诊记录标题
      subtitle: '查看历史就诊', // 就诊记录副标题
      onClick: () => console.log('就诊记录'), // 就诊记录点击事件
    },
    {
      id: 'privacy', // 隐私设置菜单项ID
      icon: Shield, // 隐私设置图标
      title: '隐私设置', // 隐私设置标题
      subtitle: '管理隐私权限', // 隐私设置副标题
      onClick: () => console.log('隐私设置'), // 隐私设置点击事件
    },
    {
      id: 'help', // 帮助中心菜单项ID
      icon: HelpCircle, // 帮助中心图标
      title: '帮助中心', // 帮助中心标题
      subtitle: '常见问题解答', // 帮助中心副标题
      onClick: () => console.log('帮助中心'), // 帮助中心点击事件
    },
    {
      id: 'settings', // 设置菜单项ID
      icon: Settings, // 设置图标
      title: '设置', // 设置标题
      subtitle: '应用设置', // 设置副标题
      onClick: () => console.log('设置'), // 设置点击事件
    },
  ];

  // 返回JSX结构
  return (
    // 主容器，设置背景色和最小高度
    <div className="bg-gray-50 min-h-screen">
      {/* 头部导航区域 */}
      <div className="bg-white px-4 py-3 border-b border-gray-100">
        <div className="flex items-center space-x-3">
          {/* 返回按钮 */}
          <button 
            onClick={() => navigate(-1)} // 点击返回上一页
            className="p-1 text-gray-600"
          >
            {/* 左箭头图标 */}
            <ArrowLeft size={20} />
          </button>
          {/* 页面标题 */}
          <h1 className="text-lg font-semibold text-gray-900">个人中心</h1>
        </div>
      </div>

      {/* 用户信息卡片区域 */}
      <div className="bg-white p-4 border-b border-gray-100">
        <div className="flex items-center space-x-4">
          {/* 用户头像 */}
          <div className="w-16 h-16 rounded-full bg-primary-500 flex items-center justify-center">
            <span className="text-xl font-semibold text-white">用</span>
          </div>
          {/* 用户信息 */}
          <div className="flex-1">
            {/* 用户名 */}
            <h2 className="text-lg font-semibold text-gray-900">用户名</h2>
            {/* 手机号 */}
            <p className="text-sm text-gray-500">手机号：138****8888</p>
            {/* 认证状态 */}
            <p className="text-xs text-gray-400 mt-1">已实名认证</p>
          </div>
          {/* 编辑按钮 */}
          <button className="px-3 py-1 border border-primary-500 text-primary-500 rounded-full text-sm">
            编辑
          </button>
        </div>
      </div>

      {/* 快捷功能区域 */}
      <div className="bg-white p-4 border-b border-gray-100">
        {/* 快捷功能标题 */}
        <h3 className="text-base font-semibold text-gray-900 mb-3">快捷功能</h3>
        {/* 快捷功能网格布局 */}
        <div className="grid grid-cols-4 gap-4">
          {/* 我的收藏快捷按钮 */}
          <button className="flex flex-col items-center space-y-2 p-3 rounded-lg hover:bg-gray-50">
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <Heart className="text-blue-500" size={20} />
            </div>
            <span className="text-xs text-gray-600">我的收藏</span>
          </button>
          {/* 就诊记录快捷按钮 */}
          <button className="flex flex-col items-center space-y-2 p-3 rounded-lg hover:bg-gray-50">
            <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
              <FileText className="text-green-500" size={20} />
            </div>
            <span className="text-xs text-gray-600">就诊记录</span>
          </button>
          {/* 我的订单快捷按钮 */}
          <button className="flex flex-col items-center space-y-2 p-3 rounded-lg hover:bg-gray-50">
            <div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
              <CreditCard className="text-orange-500" size={20} />
            </div>
            <span className="text-xs text-gray-600">我的订单</span>
          </button>
          {/* 帮助中心快捷按钮 */}
          <button className="flex flex-col items-center space-y-2 p-3 rounded-lg hover:bg-gray-50">
            <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
              <HelpCircle className="text-purple-500" size={20} />
            </div>
            <span className="text-xs text-gray-600">帮助中心</span>
          </button>
        </div>
      </div>

      {/* 菜单列表区域 */}
      <div className="bg-white">
        {/* 遍历渲染菜单项 */}
        {menuItems.map((item, index) => (
          <button
            key={item.id} // 设置唯一key
            onClick={item.onClick} // 绑定点击事件
            className={`w-full flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 ${
              index === menuItems.length - 1 ? 'border-b-0' : '' // 最后一项不显示底部边框
            }`}
          >
            {/* 菜单项左侧内容 */}
            <div className="flex items-center space-x-3">
              {/* 菜单项图标 */}
              <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                <item.icon className="text-gray-600" size={16} />
              </div>
              {/* 菜单项文本内容 */}
              <div className="text-left">
                {/* 菜单项标题 */}
                <p className="text-sm font-medium text-gray-900">{item.title}</p>
                {/* 菜单项副标题（如果存在） */}
                {item.subtitle && (
                  <p className="text-xs text-gray-500">{item.subtitle}</p>
                )}
              </div>
            </div>
            {/* 右箭头图标 */}
            <ChevronRight className="text-gray-400" size={16} />
          </button>
        ))}
      </div>

      {/* 退出登录区域 */}
      <div className="p-4">
        {/* 退出登录按钮 */}
        <button className="w-full flex items-center justify-center space-x-2 p-4 bg-red-50 text-red-600 rounded-lg hover:bg-red-100">
          {/* 退出图标 */}
          <LogOut size={16} />
          {/* 退出文本 */}
          <span className="text-sm font-medium">退出登录</span>
        </button>
      </div>

      {/* 版本信息区域 */}
      <div className="text-center py-4">
        {/* 版本号文本 */}
        <p className="text-xs text-gray-400">妙手医生 v1.0.0</p>
      </div>
    </div>
  );
} 